<template>
  <view>
     <!-- 首页 -->
  <NavBar title="首页" :isIcon="false" brg="#f8f8f8" colorText="#333">
  <view class="home-container">
    
    <!-- 主横幅 - 轮播图 -->
    <view class="hero-banner">
      <swiper
        class="banner-swiper"
        :indicator-dots="bannerList.length > 1"
        :autoplay="bannerList.length > 1"
        :interval="3000"
        :duration="500"
        :circular="bannerList.length > 1"
        indicator-color="rgba(255, 255, 255, 0.5)"
        indicator-active-color="#ffffff"
      >
        <swiper-item v-for="(banner, index) in bannerList" :key="index">
          <image class="banner-image" :src="banner" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>
    
    <!-- 提示栏 -->
    <view class="alert-bar">
     <image class="alert-icon" src="/static/index2.png" mode=""></image>
      <view class="marquee-container">
        <view
          class="marquee-text"
          :animation="animationData"
        >
          {{ systemNotice }}
        </view>
      </view>
    </view>
    
    <!-- 功能卡片区域 -->
    <view class="feature-cards">
      <!-- 拍照搜题卡片 -->
      <view class="main-card " @click="goToPhotoSearch">
           <image class="main-card-paizhao" src="/static/index3.png" mode=""></image>
      </view>
      
      <!-- 右侧小卡片 -->
      <view class="side-cards">
        <view class="small-card " @click="goToCardExchange">
           <image class="main-card-duihuan" src="/static/index4.png" mode=""></image>
        </view>
        <view class="small-card " @click="goToCardOprttion">
          <image class="main-card-duihuan" src="/static/index5.png" mode=""></image>
        </view>
      </view>
    </view>
    
    <!-- 每日任务横幅 -->
    <view class="daily-tasks-banner" v-if="homeFeedPoster">
       <image class="daily-tasks-banner-img" :src="homeFeedPoster" mode="aspectFill"></image>
    </view>
    
    <!-- 导航图标网格 -->
    <view class="nav-grid">
      <!-- 第一行 -->
      <view class="nav-row">
        <view class="nav-item task-center"  @click="goToQuestion('/pages/task-center/task-center')">
		  <image class="nav-icon" src="/static/nav1.png" mode=""></image>
          <text class="nav-text">任务中心</text>
        </view>
        <view class="nav-item question-bank" @click="goToQuestion('/pages/question-bank/question-bank')">
          <image class="nav-icon" src="/static/nav2.png" mode=""></image>
          <text class="nav-text">全部题库</text>
        </view>
        <view class="nav-item cooperation">
         <image class="nav-icon" src="/static/nav3.png" @click="goToQuestion('/pages/cooperation/cooperation')" mode=""></image>
          <text class="nav-text">合作加盟</text>
        </view>
        <view class="nav-item customer-service" @click='goToQuestion("/pages/on-line/on-line")'>
           <image class="nav-icon" src="/static/nav4.png" mode=""></image>
          <text class="nav-text">在线客服</text>
        </view>
      </view>
      
      <!-- 第二行 -->
      <view class="nav-row">
        <view class="nav-item agent" @click="handleAgentFunction">
          <image class="nav-icon" src="/static/nav5.png" mode=""></image>
          <text class="nav-text">代理商</text>
        </view>
        <view class="nav-item add-times">
         <image class="nav-icon" src="/static/nav6.png" mode="" @click="goToQuestion('/pages/purchase-resource/purchase-resource')"></image>
          <text class="nav-text">增加次数</text>
        </view>
        <view class="nav-item lifetime-vip" @click="goToQuestion('/pages/vip/vip')">
          <image class="nav-icon" src="/static/nav7.png" mode=""></image>
          <text class="nav-text">终身VIP</text>
        </view>
        <view class="nav-item mock-exam" @click="handleExam">
          <image class="nav-icon" src="/static/nav8.png" mode=""></image>
          <text class="nav-text">模拟考试</text>
        </view>
      </view>
    </view>
    
	    <!-- 小程序客服弹窗 -->
	<uni-popup ref="insufficientPopup" type="center" :mask-click="false">
	      <view class="insufficient-popup-content" v-if="homeInterstitialPoster">
	          <image class="insufficient-popup-content-img" :src="homeInterstitialPoster" mode="aspectFill"></image>
			  <!--<image class="insufficient-popup-content-ewm" src="/static/uni.png" mode=""></image>-->
			  <image class="insufficient-popup-content-clone" @click='handelClone' src="/static/guanbi.png" mode=""></image>
	      </view>
	    </uni-popup>
  </view>
  </NavBar>
  
  
  </view>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onShareAppMessage } from '@dcloudio/uni-app'
import { getSystemNotice, getBannerConfig, getPostersConfig } from '../../utils/config.js'
import { isLoggedIn, getCurrentUser } from '../../utils/user.js'
import { isWeixinMiniProgram } from '../../utils/platform.js'

const title = ref('Hello')
const currentTime = ref('')
const currentPage = ref('index')
const testTime = ref('')

// Banner轮播相关
const bannerList = ref([])

// 海报相关
const homeFeedPoster = ref('')
const homeInterstitialPoster = ref('')

// 系统公告相关
const systemNotice = ref('本软件仅用于学习使用,不可用于正式考试。')
const animationData = ref({})
const containerWidth = ref(0)
const textWidth = ref(0)

// uView 测试数据
const testInput = ref('')
const testSwitch = ref(false)
const testRate = ref(3)
const insufficientPopup = ref()

// 确保 uni 对象可用
onMounted( () => {
  currentTime.value = new Date().toLocaleString()
  console.log('应用已加载')

  // 获取启动参数（微信小程序）
  getInviterIdFromLaunch()

  // 初始化微信分享菜单
  initWechatShareMenu()

  // 获取系统公告
  loadSystemNotice()

  // 加载Banner配置
  loadBannerConfig()

  // 加载海报配置
  loadPostersConfig()

  // 初始化跑马灯动画
  setTimeout(() => {
    initMarqueeAnimation()
  }, 1000)
})

// 获取启动参数中的邀请人ID并缓存
const getInviterIdFromLaunch = () => {
  // 判断是否为微信小程序
  if (isWeixinMiniProgram()) {
    try {
      // #ifdef MP-WEIXIN
      // 方式1：使用 getLaunchOptionsSync 获取小程序启动时的参数
      const launchOptions = uni.getLaunchOptionsSync()
      console.log('getLaunchOptionsSync 启动参数:', launchOptions)
      console.log('启动参数 query:', launchOptions?.query)

      // 方式2：使用 getEnterOptionsSync 获取本次进入小程序的参数（推荐）
      const enterOptions = uni.getEnterOptionsSync()
      console.log('getEnterOptionsSync 进入参数:', enterOptions)
      console.log('进入参数 query:', enterOptions?.query)

      // 优先使用 enterOptions，因为它获取的是本次进入的参数
      const query = enterOptions?.query || launchOptions?.query || {}
      console.log('最终 query 对象:', query)

      // 从query参数中获取inviter_id
      const inviterId = query.inviter_id || ''
      console.log('获取到的邀请人ID:', inviterId)

      // 如果有邀请人ID，缓存到本地
      if (inviterId) {
        uni.setStorageSync('inviter_id', inviterId)
        console.log('邀请人ID已缓存到本地:', inviterId)
      } else {
        console.log('未获取到邀请人ID')
      }
      // #endif
    } catch (error) {
      console.error('获取启动参数失败:', error)
    }
  } else {
    console.log('当前不是微信小程序环境，跳过获取启动参数')
  }
}

// 初始化微信分享菜单
const initWechatShareMenu = () => {
  // 判断是否为微信小程序
  if (isWeixinMiniProgram()) {
    try {
      // #ifdef MP-WEIXIN
      wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline'],
        success: (res) => {
          console.log('微信分享菜单初始化成功:', res)
        },
        fail: (err) => {
          console.error('微信分享菜单初始化失败:', err)
        }
      })
      // #endif
    } catch (error) {
      console.error('初始化微信分享菜单异常:', error)
    }
  } else {
    console.log('当前不是微信小程序环境，跳过分享菜单初始化')
  }
}

// 微信小程序分享
// #ifdef MP-WEIXIN
onShareAppMessage((res) => {
  console.log('分享触发:', res)

  const user = getCurrentUser()
  const userid = user?.userid || ''

  return {
    title: '邀请你一起使用solve拍照搜题',
    path: `/pages/index/index?inviter_id=${userid}`,
    imageUrl: '/static/profile/avatar.jpg' // 分享图片
  }
})
// #endif

const goToLogin = () => {
  console.log('点击登录按钮，跳转到登录页面')
  uni.navigateTo({
    url: '/pages/login/login',
    success: (res) => {
      console.log('跳转成功', res)
    },
    fail: (err) => {
      console.error('跳转失败', err)
      uni.showToast({
        title: '跳转失败: ' + (err.errMsg || '未知错误'),
        icon: 'none',
        duration: 3000
      })
    }
  })
}

const goBack = () => {
  console.log('返回首页')
  currentPage.value = 'index'
  currentTime.value = new Date().toLocaleString()
  // 更新 URL
  window.history.pushState({}, '', '#/pages/index/index')
}

// uView 测试方法
const showToast = () => {
  uni.showToast({
    title: 'uView 按钮点击成功！',
    icon: 'success'
  })
}

const onSwitchChange = (value: boolean) => {
  console.log('开关状态:', value)
  uni.showToast({
    title: `开关状态: ${value ? '开启' : '关闭'}`,
    icon: 'none'
  })
}

const onRateChange = (value: number) => {
  console.log('评分:', value)
  uni.showToast({
    title: `评分: ${value} 星`,
    icon: 'none'
  })
}

const goToCardExchange = () => {
  console.log('跳转到卡密兑换页面')
  uni.navigateTo({
    url: '/pages/card-exchange/card-exchange',
    success: (res) => {
      console.log('跳转成功', res)
    },
    fail: (err) => {
      console.error('跳转失败', err)
      uni.showToast({
        title: '跳转失败: ' + (err.errMsg || '未知错误'),
        icon: 'none',
        duration: 3000
      })
    }
  })
}
// 打开客服弹窗
const openInsufficientPopup = () => {
  console.log('打开客服弹窗')
  if (insufficientPopup.value) {
    insufficientPopup.value.open()
  } else {
    console.error('弹窗ref未找到')
  }
}

// 关闭客服弹窗
const handelClone = () => {
  console.log('关闭客服弹窗')
  insufficientPopup.value.close()
}
const goToCardOprttion = () => {
	uni.navigateTo({
	  url: '/pages/tutorial/tutorial',
	  success: (res) => {
	    console.log('跳转成功', res)
	  },
	  fail: (err) => {
	    console.error('跳转失败', err)
	    uni.showToast({
	      title: '跳转失败: ' + (err.errMsg || '未知错误'),
	      icon: 'none',
	      duration: 3000
	    })
	  }
	})
}

const goToPhotoSearch = () => {
  console.log('跳转到拍照搜题页面')
  uni.navigateTo({
    url: '/pages/photo-search/photo-search',
    success: (res) => {
      console.log('跳转成功', res)
    },
    fail: (err) => {
      console.error('跳转失败', err)
      uni.showToast({
        title: '跳转失败: ' + (err.errMsg || '未知错误'),
        icon: 'none',
        duration: 3000
      })
    }
  })
}

const goToQuestion = (url) => {
	uni.navigateTo({
	  url: url,
	  success: (res) => {
	    console.log('跳转成功', res)
	  },
	  fail: (err) => {
	    console.error('跳转失败', err)
	    uni.showToast({
	      title: '跳转失败: ' + (err.errMsg || '未知错误'),
	      icon: 'none',
	      duration: 3000
	    })
	  }
	})
}

const handleExam = () => {
    uni.showToast({
      title: '敬请期待',
      icon: 'none',
      duration: 1000
	  })
}

// 代理商功能处理函数
const handleAgentFunction = () => {
  console.log('代理商功能被点击')

  // 先检查登录状态
  const loginStatus = isLoggedIn()
  console.log('登录状态:', loginStatus)

  if (!loginStatus) {
    // 未登录，直接跳转到代理商申请页面
    console.log('用户未登录，跳转到代理商申请页面')
    uni.navigateTo({
      url: '/pages/agent-apply/agent-apply',
      success: (res) => {
        console.log('跳转代理商申请页面成功', res)
      },
      fail: (err) => {
        console.error('跳转代理商申请页面失败', err)
        uni.showToast({
          title: '跳转失败',
          icon: 'none'
        })
      }
    })
    return
  }

  // 已登录，获取用户数据
  try {
    const currentUser = getCurrentUser()
    console.log('当前用户数据:', currentUser)

    if (!currentUser) {
      console.warn('获取用户数据失败，跳转到代理商申请页面')
      uni.navigateTo({
        url: '/pages/agent-apply/agent-apply'
      })
      return
    }

    const agentStatus = currentUser.agent_status
    console.log('代理商状态:', agentStatus)

    // 根据 agent_status 处理跳转逻辑
    switch (agentStatus) {
      case 0:
        // 未申请，跳转到申请页面
        console.log('代理商状态为0，跳转到申请页面')
        uni.navigateTo({
          url: '/pages/agent-apply/agent-apply'
        })
        break

      case 1:
        // 审核中，跳转到审核页面
        console.log('代理商状态为2，跳转到审核页面')
        uni.navigateTo({
          url: '/pages/agent-review/agent-review'
        })
        break
      case 2:
         // 已通过，跳转到代理商主页
        console.log('代理商状态为1，跳转到代理商主页')
        uni.navigateTo({
          url: '/pages/agent-home/agent-home'
        })
        break
      case 4:
        // 已冻结，显示提示
        console.log('代理商状态为3，账户已冻结')
        uni.showToast({
          title: '代理商已冻结',
          icon: 'none',
          duration: 2000
        })
        break

      default:
        // 未知状态，跳转到申请页面
        console.warn('未知的代理商状态:', agentStatus, '跳转到申请页面')
        uni.navigateTo({
          url: '/pages/agent-apply/agent-apply'
        })
        break
    }

  } catch (error) {
    console.error('处理代理商功能时出错:', error)
    uni.showToast({
      title: '获取用户信息失败',
      icon: 'none'
    })
  }
}

// 加载系统公告
const loadSystemNotice = async () => {
  try {
    const notice = await getSystemNotice(true)
    systemNotice.value = notice
    console.log('系统公告加载成功:', notice)
  } catch (error) {
    console.error('加载系统公告失败:', error)
    // 使用默认公告
    systemNotice.value = '本软件仅用于学习使用,不可用于正式考试。'
  }
}

// 加载Banner配置
const loadBannerConfig = async () => {
  try {
    const bannerConfig = await getBannerConfig(false)
    console.log('Banner配置:', bannerConfig)

    // 过滤出非空的banner
    const banners = []
    if (bannerConfig.banner_1) {
      banners.push(bannerConfig.banner_1)
    }
    if (bannerConfig.banner_2) {
      banners.push(bannerConfig.banner_2)
    }
    if (bannerConfig.banner_3) {
      banners.push(bannerConfig.banner_3)
    }

    // 如果有配置的banner，则使用配置的；否则使用默认的
    if (banners.length > 0) {
      bannerList.value = banners
      console.log('Banner列表加载成功:', banners)
    } else {
      console.log('没有配置Banner，使用默认图片')
      bannerList.value = []
    }
  } catch (error) {
    console.error('加载Banner配置失败:', error)
    // 使用默认banner
    bannerList.value = []
  }
}

// 加载海报配置
const loadPostersConfig = async () => {
  try {
    const postersConfig = await getPostersConfig(false)
    console.log('海报配置:', postersConfig)

    // 设置首页feed海报
    if (postersConfig.home_feed) {
      homeFeedPoster.value = postersConfig.home_feed
      console.log('首页feed海报加载成功:', postersConfig.home_feed)
    } else {
      console.log('没有配置首页feed海报')
      homeFeedPoster.value = ''
    }

    // 设置首页插屏海报（客服弹窗）
    if (postersConfig.home_interstitial) {
      homeInterstitialPoster.value = postersConfig.home_interstitial
      console.log('首页插屏海报加载成功:', postersConfig.home_interstitial)

      // 自动打开客服弹窗
      setTimeout(() => {
        openInsufficientPopup()
      }, 500)
    } else {
      console.log('没有配置首页插屏海报')
      homeInterstitialPoster.value = ''
    }
  } catch (error) {
    console.error('加载海报配置失败:', error)
    // 使用默认海报
    homeFeedPoster.value = ''
    homeInterstitialPoster.value = ''
  }
}

// 初始化跑马灯动画
const initMarqueeAnimation = () => {
  // 获取容器宽度
  uni.createSelectorQuery().select('.marquee-container').boundingClientRect((containerRect) => {
    if (containerRect) {
      containerWidth.value = containerRect.width

      // 获取文本宽度
      uni.createSelectorQuery().select('.marquee-text').boundingClientRect((textRect) => {
        if (textRect) {
          textWidth.value = textRect.width

          // 开始动画
          startMarqueeAnimation()
        }
      }).exec()
    }
  }).exec()
}

// 开始跑马灯动画
const startMarqueeAnimation = () => {
  // 创建动画实例
  const animation = uni.createAnimation({
    duration: 0,
    timingFunction: 'linear'
  })

  // 设置初始位置（从右边开始）
  animation.translateX(containerWidth.value).step()
  animationData.value = animation.export()

  // 延迟一下再开始滚动
  setTimeout(() => {
    const scrollAnimation = uni.createAnimation({
      duration: (textWidth.value + containerWidth.value) * 20, // 根据文本长度计算动画时长
      timingFunction: 'linear'
    })

    // 滚动到左边消失
    scrollAnimation.translateX(-textWidth.value).step()
    animationData.value = scrollAnimation.export()

    // 动画结束后重新开始
    setTimeout(() => {
      startMarqueeAnimation()
    }, (textWidth.value + containerWidth.value) * 20)
  }, 100)
}

</script>

<style scoped>
.home-container {
  height: 100vh;
  padding-top: 160rpx;
  background: linear-gradient( 180deg, #C2DDFF 0%, #FFFFFF 100%);
border-radius: 0rpx 0rpx 0rpx 0rpx;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx 10rpx;
  background: white;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.status-time {
  font-size: 34rpx;
  font-weight: 600;
  color: #1A1A1A;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.page-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #1A1A1A;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.status-icon {
  font-size: 24rpx;
  color: #1A1A1A;
  opacity: 0.8;
}

.profile-placeholder {
  width: 36rpx;
  height: 36rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 18rpx;
  margin-left: 8rpx;
  box-shadow: 0 2rpx 6rpx rgba(102, 126, 234, 0.3);
}

/* 主横幅 */
.hero-banner {
  margin: 20rpx 30rpx;
  border-radius: 24rpx;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
}

.banner-swiper {
  width: 100%;
  height: 282rpx;
}

.banner-image{
	width: 100%;
	height: 282rpx;
}
.main-card-duihuan{
	height: 138rpx;
	width: 100%;
}

.banner-robot {
  width: 140rpx;
  height: 140rpx;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 70rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  backdrop-filter: blur(10rpx);
  border: 2rpx solid rgba(255, 255, 255, 0.2);
}
.insufficient-popup-content{
	position: relative;
	z-index: 10000;
}
.insufficient-popup-content-img{
	width:668rpx;
	height: 876rpx;
	margin: 0 auto;
}
.robot-emoji {
  font-size: 48rpx;
  margin-bottom: 8rpx;
}

.robot-x {
  font-size: 36rpx;
  font-weight: 900;
  color: white;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

/* 提示栏 */
.alert-bar {
  margin: 0 30rpx 24rpx;
  padding: 24rpx 32rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
 background: #E6F4FF;
box-shadow: 0rpx 6rpx 6rpx 2rpx rgba(0,0,0,0.04);


}

.alert-icon {
 width: 34rpx;
 height: 34rpx;
}

.marquee-container {
  flex: 1;
  height: 34rpx;
  line-height: 34rpx;
  margin-left: 10rpx;
  overflow: hidden;
  position: relative;
}

.marquee-text {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: 300;
  font-size: 24rpx;
  color: #333333;
  white-space: nowrap;
}
.insufficient-popup-content-ewm{
	width: 235rpx;
	height: 225rpx;
	position: absolute;
	left: 31.8%;
	bottom: 18.5%;
}
/* 功能卡片区域 */
.feature-cards {
  display: flex;
  margin: 0 30rpx 24rpx;
  gap: 24rpx;
}
.insufficient-popup-content-clone{
	position: absolute;
	bottom: -100rpx;
	left: 50%;
	width: 50rpx;
	height: 50rpx;
	transform: translateX(-50%);
}
.main-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;

}


.main-card-paizhao{
	width: 320rpx;
	height: 300rpx;
}
.card-robot {
  width: 100rpx;
  height: 100rpx;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
  backdrop-filter: blur(10rpx);
  border: 2rpx solid rgba(255, 255, 255, 0.3);
}

.card-robot-emoji {
  font-size: 40rpx;
}

.card-title {
  font-size: 36rpx;
  font-weight: 800;
  color: white;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.side-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.small-card {
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;

}

.small-card:active {
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 20rpx rgba(33, 150, 243, 0.2);
}

.card-exchange {
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
}

.card-tutorial {
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
  box-shadow: 0 4rpx 16rpx rgba(255, 152, 0, 0.15);
}

.card-tutorial:active {
  box-shadow: 0 6rpx 20rpx rgba(255, 152, 0, 0.2);
}

.card-icon {
  font-size: 36rpx;
  margin-bottom: 16rpx;
  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
}

/* 每日任务横幅 */
.daily-tasks-banner {
 height: 122rpx;
 margin: 0 20rpx;
}
.daily-tasks-banner-img {
 width: 100%;
 height: 122rpx;
}


.tasks-icon {
  font-size: 48rpx;
  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
}

.tasks-text {
  flex: 1;
  display: flex;
  align-items: center;
  height: 58rpx;
  background: #FFFFFF;
border-radius: 28rpx 28rpx 28rpx 28rpx;
padding: 0 15rpx;
}

.tasks-title {
 font-weight: 400;
font-size: 36rpx;
color: #FAAF55;
line-height: 48rpx;
text-align: left;
}

.tasks-subtitle {
font-weight: 400;
font-size: 28rpx;
color: #000000;
line-height: 38rpx;
text-align: left;
margin-left: 10rpx;
}

/* 导航图标网格 */
.nav-grid {
  margin: 30rpx 30rpx 60rpx;
  background-color: #fff;
  box-shadow: 0rpx 6rpx 6rpx 2rpx rgba(0,0,0,0.04);
  border-radius: 16rpx;

}

.nav-row {
  display: flex;
  gap: 24rpx;
  margin-bottom: 24rpx;
  padding-top: 20rpx;
}

.nav-item {
  flex: 1;
  border-radius: 20rpx;
  padding: 0 24rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.nav-item:active {
  transform: translateY(-4rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}

.nav-icon {
  font-size: 44rpx;
  margin-bottom: 16rpx;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;

}



.nav-text {
font-weight: 400;
font-size: 24rpx;
color: #333333;
line-height: 34rpx;
text-align: left;
}




/* 测试页面样式 */
.test-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.test-title {
  font-size: 48rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 20rpx;
}

.test-subtitle {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin-bottom: 20rpx;
}

.test-info {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-bottom: 60rpx;
}

.back-button {
  background: white;
  color: #667eea;
  border: none;
  border-radius: 50rpx;
  padding: 24rpx 60rpx;
  font-size: 32rpx;
  font-weight: bold;
}

/* 弹窗层级调整 - 确保在tabbar上方 */
::v-deep .uni-popup {
  z-index: 10001 !important;
}

::v-deep .uni-popup__wrapper {
  z-index: 10001 !important;
}

::v-deep .uni-popup__mask {
  z-index: 10000 !important;
}
</style>